<!--
 * @Description: @excel表格预览弹窗
 * @FilePath: /glm_frontend/src/views/Dialog/ExcelPreviewDialog.vue
-->
<template>
	<el-dialog v-model="isVisible" append-to-body fullscreen class="comm-dialog fileDetail-container">
		<template #header>
			<span class="title">
				<span>{{ title }}</span>
			</span>
		</template>
		<div class="iframe-box">
			<vue-office-excel :src="fileUrl" @rendered="renderedHandler" @error="errorHandler" />
			<div class="btn-box">
				<el-button type="primary" @click="isVisible = false">关 闭</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
const emit = defineEmits(['update:isShow'])
const props = defineProps({
	isShow: {
		type: Boolean,
		required: true
	},
	title: {
		type: String,
		default: '查看文件'
	},
	// 文件url地址
	fileUrl: {
		type: String,
		required: true
	}
})
const isVisible = computed({
	get() {
		return props.isShow
	},
	set() {
		emit('update:isShow', false)
	}
})
</script>

<style lang="scss">
.fileDetail-container {
	.el-dialog__body {
		height: 96%;
	}
	.iframe-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		iframe {
			flex: 1;
		}
	}
}
</style>
